<template>
  <div style="min-height: 500px">
    <div class="mt_5 tac">
      <a-button type="primary" size="small" @click="savePageUser">确定</a-button>
    </div>
    <a-table ref="pageUserTable" :bordered="{cell:true}" :pagination="false" stripe :data="state.allUsers"  row-selection="{type: 'checkbox', showCheckedAll: false}"  row-key="id" @select="handleSelectionChange">
      <template #columns>
        <a-table-column title="用户姓名" data-index="name"></a-table-column>
      </template>
    </a-table>
  </div>
</template>

<script lang="ts" setup>
import axios from "axios";
import { Message } from '@arco-design/web-vue'
import {reactive, ref, onMounted, defineAsyncComponent, defineProps, nextTick} from "vue";

const pageUserTable = ref(null)
let props = defineProps({
  pageId : {type : Number, default: 0}
})

const state = reactive({
  allUsers :[],
  selectUsers:[],
})
const handleSelectionChange = (selectRows)=>{
  state.selectUsers = selectRows
}
const savePageUser = () =>{
  const pageUsers = [];
  pageUsers.push(...state.selectUsers)
  axios.post('/pageadmin/savepageuser', {pageId : props.pageId, pageUsers:pageUsers}
  ).then(res=>{
    const {code,msg} = res;
    if(code === '200'){
      Message.success(msg)
    }
  })
}
const loadPageUser = () =>{
  axios.post('/pageadmin/listpageuser', {pageId : props.pageId}).then(res => {
    const { data } = res
    const {allUser, pageUser} = data
    state.allUsers = allUser
    state.selectUsers = pageUser.map( (item) => item.id)
    nextTick(()=>{
      pageUserTable && pageUserTable.value.select(state.selectUsers, true)
    })
  })
}
onMounted(()=>{
  loadPageUser();
})
</script>
<style scoped>

</style>
